<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$data.dotitle}</title>
    {load href="/static/comm/jquery-3.3.1/jquery-3.3.1.min.js" /}
    {load href="/static/comm/layui/css/layui.css" /}
    {load href="/static/comm/layui/layui.all.js" /}

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-body" style="padding: 5%;">
        <!-- 内容主体区域 -->
        <div style="text-align: center;">
            <div class="layui-inline">
                <h2 style="color: #009688;">{$data.dotitle}</h2>
            </div>
            <div class="layui-inline layui-layout-right">
                <button class="layui-btn" onclick="copyToClipboard('http://www.baojia.com/fxoffer?id=1')">分享</button>
            </div>
        </div>
        <table class="layui-table">
            <tr>

                <th style="color: #009688;">创建时间:</th>
                <th style="color: #000;">{$data.updatetime|date='Y-m-d H:i'}</th>
                <th style="color: #009688;">总价:</th>
                <th style="color: #000;">￥{$data.dopsrice}</th>
                <th style="color: #009688;">项目制作周期:</th>
                <th style="color: #000;">{$data.docycle}工作日</th>
                <th style="color: #009688;">报价表所属公司:</th>
                <th style="color: #000;">{$data.docompany}</th>
                <th style="color: #009688;">报价表制作作者:</th>
                <th style="color: #000;">{$data.doauthor}</th>
            </tr>
        </table>
        <div class="layui-inline">
            <h3 style="color: #009688;">功能需求</h3>
        </div>
        <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
            <thead>

            <tr>
                <th>功能</th>
                <th>描述</th>
                <th>重要性</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody>
            {volist name="functionlist" id="function"}
            <tr>
                <td>{$function.doftitle}</td>
                <td>{$function.dofdescribe}</td>
                <td>{$function.doflevel}</td>
                <td>￥{$function.price}</td>
            </tr>
            {/volist}

            </tbody>
        </table>
        <div class="layui-inline">
            <h3 style="color: #009688;">参与项目人数</h3>
        </div>
        <table class="layui-table" lay-even lay-skin="line" lay-size="sm">
            <thead>
            <tr>
                <th>职位</th>
                <th>人数</th>
            </tr>
            </thead>
            <tbody>
            {volist name="memberlist" id="member"}
            <tr>
                <td>{$member.domposition}</td>
                <td>{$member.dommumber}</td>
            </tr>
            {/volist}
            <tbody>
        </table>
    </div>

</div>
<script>
    //JavaScript代码区域
    layui.use(['jquery', 'table', 'form', 'layer', 'laydate','element'], function(){
        var element = layui.element;
        form = layui.form;
        var $ = layui.$, table = layui.table, layer = layui.layer, laydate = layui.laydate, admin = layui.admin, router = layui.router();
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    function copyToClipboard (text) {
        if(text.indexOf('-') !== -1) {
            let arr = text.split('-');
            text = arr[0] + arr[1];
        }
        var textArea = document.createElement("textarea");
        textArea.style.position = 'fixed';
        textArea.style.top = '0';
        textArea.style.left = '0';
        textArea.style.width = '2em';
        textArea.style.height = '2em';
        textArea.style.padding = '0';
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';
        textArea.style.background = 'transparent';
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';
            layui.use('layer',function (){
                var layer=layui.layer;
                layer.msg(msg);
            })
        } catch (err) {
            layui.use('layer',function (){
                var layer=layui.layer;
                layer.msg("该浏览器不支持点击复制到剪贴板");
            })
        }

        document.body.removeChild(textArea);
    }
</script>
</body>
</html>